package com.tencent.compose.sample.mainpage.sectionItem

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Tab
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.ui.tooling.preview.Preview

@Preview()
@Composable
internal fun TabDemo() {

    // 记住选中状态，实现交互效果
    var isSelected by remember { mutableStateOf(false) }
    // 可配置的标题文本
    val tabTitle = "标签页"

    // 定义选中和未选中状态的颜色，便于统一修改
    val indicatorColor = if (isSelected) Color.Red else Color.Transparent
    val textColor = if (isSelected) {
        MaterialTheme.colors.primary
    } else {
        MaterialTheme.colors.onSurface.copy(alpha = 0.6f)
    }
    Tab(
        selected = isSelected,
        onClick = { isSelected = !isSelected },
        modifier = Modifier
            .height(50.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 10.dp),
            verticalArrangement = Arrangement.SpaceBetween,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // 选中指示器
            Box(
                modifier = Modifier
                    .size(10.dp)
                    .background(color = indicatorColor)
            )
            // 标签文本
            Text(
                text = tabTitle,
                style = MaterialTheme.typography.body1,
                color = textColor,
            )
        }
    }
}
